<template>
  <div class="market-container">
    <div class="container grid-container">
      <grid
        class="grid"
        :gird-show-num="3"
        :aspect-ratio="'0.75'"
        :type=type
      >
        <!-- <template v-slot:slotName="receiver">
          <div class="grid-item">
            <div class="grid-img-box">
              <div class="popup">查看详情</div>
              <el-image
                class="grid-img"
                :src="gridImg.url"
                :fit="gridImgObj"
              ></el-image>
            </div>
            <div class="grid-text">
              <div class="name">
                <p>创世 {{ info }}</p>
              </div>
              <div class="price-box">
                <img src="@/image/logo-min.png" alt="" />
                <div class="price">
                  <p>800</p>
                </div>
              </div>
            </div>
          </div>
        </template> -->
      </grid>
    </div>
    <div class="findmore-container">
      <button class="find-button" @click="  toFind()">查看更多</button>
    </div>
  </div>
</template>

<script>
import grid from "@/components/Grid.vue";
export default {
  name: "HomeGrid",
  components: { grid },
  props:{

  },
  data() {
    return {
      type:"itemGroups"
    };
  },
  methods:{
    toFind(){
      this.$router.push("/find")
    }
  },
  mounted(){

  }
};
</script>
<style  lang="less" >

.market-container {
  //   margin-top: 120px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .select-grid {
    position: relative;
    align-self: flex-start;
    left: 5%;
    height: 50px;
    display: flex;

    .input-box {
      height: 40px;
      border: 1px solid #2469e5;
      border-radius: 24px;
      padding: 0 10px;

      input {
        border: none;
        outline: none;
        height: 40px;
        border-radius: 24px;

        padding-left: 10px;
        box-sizing: border-box;
        margin-right: 10px;
      }

      button {
        margin-left: 10px;

        padding: 5px 10px 5px 10px;
        border: none;
        border-radius: 24px;
        background: #2469e5;
        cursor: pointer;
        color: #fff;
      }
    }

    .el-select {
      position: relative;
      margin-left: 20px;

      .el-scrollbar__view {
        .el-select-dropdown__item {
          padding-left: 10px !important;
        }
      }
    }
  }

  .grid-container {
    position: relative;
    width: 100%;
    // min-width: 1000px;
    max-width: 1200px;
    // height: 500px;
    // overflow: scroll;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 50px;
    padding: 0% 2rem;

    .grid {
      position: relative;

      .grid-item {
        position: relative;
        width: 100%;
        height: 100%;
        // background: #2465;
        box-sizing: border-box;
        overflow: hidden;
        background: #fff;
        box-shadow: 4px 4px 6px rgb(143, 140, 140);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        @apply rounded-lg;

        .grid-img-box {
          position: absolute;
          width: 100%;
          height: 100%;
          overflow: hidden;

          .grid-img {
            position: relative;
            height: 100%;
            width: 100%;
            overflow: hidden;

            /deep/ .el-image__inner {
              transition: 0.6s;
              filter: blur(20px);
              -webkit-filter: blur(0px);
            }
          }

          /deep/ .el-image__inner {
            transition: 0.6s;
            filter: blur(20px);
            -webkit-filter: blur(0px);
          }

          .popup {
            position: absolute;
            top: 0%;
            left: 0%;
            right: 0;
            bottom: 0%;
            margin: auto;
            width: 80%;
            height: 40px;
            background: rgba(22, 21, 21, 0.757);
            color: #fff;
            border: 2px solid #fff;
            border-radius: 20px;
            line-height: 40px;
            z-index: 2;
            display: none;
          }
        }

        .grid-text {
          position: relative;
          height: auto;
          width: 100%;
          // top: 80%;
          background: white;
          // padding-bottom: 1rem;
          display: flex;
          flex-direction: column;

          .name {
            position: relative;
            width: 100%;

            h1{
              text-align: left;
              padding: .5rem ;
              padding-bottom: 0%;
              font-size: 1.2rem;
              // box-sizing: border-box;
              // color: rgb(16, 209, 209);
              font-weight: 600;
              text-indent: .5rem;
            }
          }

          .price-box {
            position: relative;
            flex: 1;
            width: 100%;
            height: 60%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding:.3rem 1rem ;
            box-sizing: border-box;

            img {
              height: 100%;
              width: 35px;
            }

            .price {
              position: relaative;
              right: 0%;
              width: 80px;
              // padding: 5px 10px 5px 10px;
              padding:.2rem .5rem;
              box-sizing: border-box;
              background: black;
              color: white;
              display: flex;
              align-items: center;
              justify-content: center;
              opacity: 0.3;
              cursor: pointer;
              @apply rounded-lg;
            }

            .price:hover {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }

  .findmore-container {
    width: 100%;
    height: 50px;

    .find-button {
      width: 200px;
      height: 40px;
      border: 2px solid black;
      border-radius: 20px;
      background: transparent;
      color: black;
      cursor: pointer;
      transform: 0.5;
    }

    .find-button:hover {
      border: #fff;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
    }
  }

  footer {
    background: #f4f4f4;
  }
}
</style>
<style lang="less">
.grid {
  .grid-img-box:hover {
    .popup {
      display: block !important;
    }

    .el-image__inner {
      transition: 0.6s;
      filter: blur(20px);
      -webkit-filter: blur(20px);
    }
  }
}
</style>